<template>
  <div>
    <Modal :value="visible" :title="title" width="800" footer-hide>
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="business" label="商家姓名">
              <Input
                type="text"
                v-model="formInline['business']['name']"
                placeholder="请输入商家姓名"
              ></Input>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem prop="content" label="内容">
              <Input
                type="text"
                v-model="formInline.content"
                placeholder="请输入发布内容"
              >
              </Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="12">
          <Col :span="12">
            <FormItem prop="address" label="发布地址">
              <Input
                v-model="formInline.address"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入发货地址"
              ></Input>
            </FormItem>
          </Col>
<!--          <Col :span="12">-->
<!--            <FormItem prop="other" label="其他信息">-->
<!--              <Input-->
<!--                v-model="formInline.other"-->
<!--                type="textarea"-->
<!--                :autosize="{ minRows: 2, maxRows: 5 }"-->
<!--                placeholder="请输入其他信息"-->
<!--              ></Input>-->
<!--            </FormItem>-->
<!--          </Col>-->
        </Row>
        <Row type="flex" justify="center" align="middle">
          <Col :span="6">
            <Button type="primary" @click="submit" style="margin-right: 10px"
            >提交</Button
            >
            <Button @click="cancel">取消</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { provincesAndCity } from '@/utils/provincesAndCity'
import { mapActions } from 'vuex'
export default {
  name: 'edit',
  data () {
    return {
      visible: false,
      title: null,
      formInline: {
        provinces: []
      },
      ruleInline: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '不能为空', trigger: 'blur' }],
        id_card: [{ required: true, message: '不能为空', trigger: 'blur' }],
        blank_card: [{ required: true, message: '不能为空', trigger: 'blur' }],
        provinces: [
          {
            required: true,
            type: 'array',
            message: '不能为空',
            trigger: 'blur'
          }
        ],
        address: [{ required: true, message: '不能为空', trigger: 'blur' }],
        pro_address: [{ required: true, message: '不能为空', trigger: 'blur' }],
        log_address: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      provincesAndCity,
      business_name: ''
    }
  },
  methods: {
    ...mapActions('friends', ['_editInfo']),
    init ({ index, row }) {
      if (index === 0) {
        this.title = '填写审核'
      } else {
        this.title = '编辑审核'
        this.formInline = Object.assign(this.formInline, row)
        this.formInline.provinces = row.address.split(' ')
      }
      this.visible = true
    },
    submit () {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          // console.log(this.formInline)
          // if ('id' in this.formInline) {
          // console.log('编辑')
          const params = {
            id: this.formInline.id,
            content: this.formInline.content,
            address: this.formInline.address,
            business: this.formInline.business.id
          }
          this._editInfo(params).then((res) => {
            // console.log(res)
            this.$Message.success('编辑成功')
          }).then(() => {
            this.visible = false
          })
          // } else {
          // console.log('添加')
          // }
        }
      })
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>

<style scoped>
</style>
